<template>
	<appVue :closeWZA='isCloseWZA()'>
		<template #sectionContent>
			<div id="newesChannel">
				<!-- <slot name='choice'></slot> -->
				<!-- <slot name='nav' sss="123"></slot> -->
				<div class="newsBanner"><newsBanner></newsBanner></div>
				<div class="newesChannel">
					<div class="content">
						<div class="contentLeft">
							<navs @changeChannel="changeChannel"></navs>
							<newsList :curentChannelId="curentChannelId"></newsList>
						</div>
						<div class="contentRight">
							<reCommend :titleObj="titleObj" :curentChannelId="curentChannelId"></reCommend>
							<div class="hotSort"><hotSort :titleObj="titleObj_list"></hotSort></div>
						</div>
					</div>
				</div>
		</div>
		</template>
	</appVue>
</template>

<script>
import { defineAsyncComponent } from 'vue';
export default {
	components: {
		appVue:defineAsyncComponent(() => import(rootPath+'/src/app.vue')),
		newsBanner:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/newsBanner.vue')),
		navs:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/nav.vue')),
		newsList:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/newsList.vue')),
		reCommend:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/reCommend.vue')),
		hotSort:defineAsyncComponent(() => import(rootPath+'/src/components/newsChannel/hotSort.vue')),
	},
	data() {
		return {
			titleObj: {
				title: '推荐阅读',
				title_icon: 'icon-Refresh-one',
				actionName: '换一换'
			},
			titleObj_list: {
				title: '热点排行',
				title_icon: 'icon-Refresh-one',
				actionName: '换一换'
			},
			curentChannelId: '',
			query:GetQueryString(),
			channelList:[],
		};
	},
	mounted(){
		SEO(this.query);
		this.getChannelList();
		this.$nextTick(()=>{
			if(localStorage.getItem("close") == 'true'){
				setTimeout(()=>{
					wuzhangai();
				}, 50)
				
			}
		})
	},
	methods: {
		changeChannel(val) {
			this.curentChannelId = val;
		},
		getChannelList(){ // 获取子栏目
			let param = {
				parentId:this.query.id,
			};
			homeApi.HeaderChannellist(param, res=>{
				if(res.code == '00000 00000'){
		       this.channelList = res.data;
				}
			})
		},
		isCloseWZA(){
			return localStorage.getItem("close") || false
		},
	}
};
</script>

<style scoped>
#newesChannel {
  height: 100%;
  overflow: auto;
  display: flex;
  flex-direction: column;
  margin-top: 150px;
}
.newsBanner {
  width: 100%;
  display: flex;
  justify-content: center;
}
.newesChannel {
  width: 100%;
  display: flex;
  justify-content: center;
  height: inherit;
}
.newesChannel .navigation {
  width: 100%;
}
.newesChannel .content {
  margin-top: 200px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  width: 1200px;
  margin-top: 60px;
}
.newesChannel .content .contentLeft {
  width: 840px;
}
.newesChannel .content .contentRight {
  width: 320px;
  margin-left: 40px;
  display: flex;
  flex-direction: column;
  height: auto;
}
.newesChannel .content .contentRight .hotSort {
  margin-top: 36px;
}
.newesChannel .hotspot {
  margin-left: 40px;
}

</style>
<style>

	.mhover:hover {
		color: #ff3333 !important;
		cursor: pointer;
	}
</style>
